<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <th:block th:replace="~{/_include/header}" />
    <title>[[${bundle.L('LoginLog')}]]</title>
  </head>
  <body>
    <div class="rb-wrapper rb-fixed-sidebar rb-collapsible-sidebar rb-collapsible-sidebar-hide-logo rb-color-header" th:classappend="${sideCollapsedClazz}">
      <th:block th:replace="~{/_include/nav-top}" />
      <th:block th:replace="~{/_include/nav-left-admin(active='login-logs')}" />
      <div class="rb-content">
        <div class="main-content container-fluid">
          <div class="card card-table">
            <div class="card-body">
              <div class="dataTables_wrapper container-fluid">
                <div class="row rb-datatable-header">
                  <div class="col-12 col-md-6">
                    <div class="dataTables_filter">
                      <div class="input-group input-search">
                        <input class="form-control" type="text" th:placeholder="${bundle.L('Query')}" maxlength="40" data-quickFields="user.loginName,&user,user.email,ipAddr" />
                        <span class="input-group-btn">
                          <button class="btn btn-secondary" type="button"><i class="icon zmdi zmdi-search"></i></button>
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="col-12 col-md-6">
                    <div class="dataTables_oper">
                      <button class="btn btn-space btn-secondary J_view-online" type="button"><i class="icon zmdi zmdi-accounts"></i> [[${bundle.L('ViewOnlineUsers')}]]</button>
                      <div class="btn-group btn-space">
                        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">[[${bundle.L('More')}]] <i class="icon zmdi zmdi-more-vert"></i></button>
                        <div class="dropdown-menu dropdown-menu-right">
                          <a class="dropdown-item J_columns"><i class="icon zmdi zmdi-code-setting"></i> [[${bundle.L('FieldShow')}]]</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div id="react-list" class="rb-loading rb-loading-active data-list">
                  <th:block th:replace="~{/_include/spinner}" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <th:block th:replace="~{/_include/footer}" />
    <script>
      window.__PageConfig = {
        type: 'RecordList',
        entity: ['LoginLog', $L('LoginLog'), 'assignment-account'],
        listConfig: _$unthy('[[${DataListConfig}]]'),
        advFilter: false,
      }
    </script>
    <script th:src="@{/assets/js/rb-datalist.js}" type="text/babel"></script>
    <script th:src="@{/assets/js/rb-forms.js}" type="text/babel"></script>
    <script th:src="@{/assets/js/rb-forms.append.js}" type="text/babel"></script>
    <script th:src="@{/assets/js/admin/online-users.js}" type="text/babel"></script>
    <script type="text/babel">
      RbList.renderAfter = function () {
        let ipAddrIndex = -1
        $('.rb-datatable-body th.sortable').each(function (idx) {
          if ($(this).data('field') === 'ipAddr') {
            ipAddrIndex = idx
            return false
          }
        })
        if (ipAddrIndex === -1) return

        ipAddrIndex += 1
        $('.rb-datatable-body tbody>tr').each(function () {
          let ipAddr = $(this).find('td:eq(' + ipAddrIndex + ') div')
          let ip = (ipAddr.text() || '').split('(')[0].trim()
          $.get('/commons/ip-location?ip=' + ip, (res) => {
            if (res.error_code === 0 && res.data.country !== 'N') {
              const L = res.data.country === 'R' ? $L('LAN') : [res.data.region, res.data.country].join(', ')
              ipAddr.text(ip + ' (' + L + ')')
            }
          })
        })
      }
      $(document).ready(() => {
        $('.J_view-online').click(() => renderRbcomp(<OnlineUserViewer />))
      })
    </script>
  </body>
</html>
